<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>天知道案例</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .search_form {
        width: 640px;
        margin: 100px auto;
      }
      .search_form img {
        display: block;
        margin: 0 auto;
      }
      .form_group {
        margin-top: 50px;
      }
      .form_group .inpuit_txt {
        width: 538px;
        height: 38px;
        border: 1px solid #41a1cb;
        text-indent: 10px;
        outline: none;
        float: left;
      }
      .form_group button {
        width: 100px;
        height: 40px;
        background-color: #41a1cb;
        border: none;
        float: left;
        color: white;
        font-size: 16px;
        cursor: pointer;
      }
      .hotkey {
        margin: 3px 0 0 2px;
      }
      .hotkey a {
        text-decoration: none;
        color: rgb(124, 124, 124);
        font-size: 14px;
        margin-right: 10px;
      }
      .weather_list {
        height: 200px;
        margin: 70px auto;
        text-align: center;
        margin-top: 50px;
      }
      .weather_list li {
        display: inline-block;
        width: 140px;
        height: 200px;
        padding: 0 10px;
        overflow: hidden;
        background: url(./img/line.png) right center no-repeat;
        background-size: 1px 130px;
      }
      .weather_list li:last-child {
        background: none;
      }
      .info_type .iconfont {
        color: #fda252;
        font-size: 30px;
        line-height: 80px;
      }
      .info_temp {
        font-size: 13px;
        color: #fda252;
      }
      .info_date {
        line-height: 40px;
        color: #999;
        font-size: 14px;
        margin-top: 15px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="search_form">
        <div class="logo"><img src="./img/logo.png" alt="" /></div>
        <div class="form_group">
          <input
            type="text"
            placeholder="请输入查询的天气"
            class="inpuit_txt"
            @keyup.enter="getWeather"
            v-model="city"
          />
          <button @click="getWeather">搜索</button>
        </div>
        <div class="hotkey">
          <!-- <a href="javascript:void(0)" @click="changeCity('北京')">北京</a>
          <a href="javascript:void(0)" @click="changeCity('上海')">上海</a>
          <a href="javascript:void(0)" @click="changeCity('广州')">广州</a>
          <a href="javascript:void(0)" @click="changeCity('深圳')">深圳</a> -->
          <a
            href="javascript:void(0)"
            v-for="item in citylist"
            @click="changeCity(item)"
            >{{item}}</a
          >
        </div>
      </div>
      <ul class="weather_list">
        <li v-for="item in weatherlist">
          <div class="info_type">
            <span class="iconfont">{{item.type}}</span>
          </div>
          <div class="info_temp">
            <b>{{item.low}}</b>
            ~
            <b>{{item.high}}</b>
          </div>
          <div class="info_date">
            <span>{{item.date}}</span>
          </div>
        </li>
      </ul>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- 官网提供的axios在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
      /*
        请求地址:http://wthrcdn.etouch.cn/weather_mini
        请求方法:get
        请求参数:city(城市名)
        响应内容:天气信息

        1. 点击回车
        2. 查询数据
        3. 渲染数据
        */
      var app = new Vue({
        el: "#app",
        data: {
          city: "",
          weatherlist: [],
          citylist: ["北京", "上海", "深圳", "广州"],
        },
        methods: {
          getWeather: function () {
            var that = this;
            console.log(that.city);
            axios
              .get("http://wthrcdn.etouch.cn/weather_mini?city=" + this.city)
              .then(function (response) {
                console.log(response.data.data.forecast);
                that.weatherlist = response.data.data.forecast;
              })
              .catch(function (error) {});
          },
          changeCity: function (city) {
            this.city = city;
            this.getWeather();
          },
        },
      });
    </script>
  </body>
</html>
